import { Meta, Story, Props, Preview } from "@storybook/addon-docs/blocks";

import Input from "../src/components/input/input.vue";
import "../src/styles/storybook/index.less";

<Meta title="数据录入/Input 输入框" component={Input} />

## 基础用法

可以使用`v-model`来实现数据的双向绑定

<Preview>
  <Story name="type 类型">
    {{
      components: { Input },
      template: `
            <form>
                <Input v-model="value" placeholder="请输入内容..."></Input>
            </form>
      `,
      data() {
        return {
          value: "",
        };
      },
    }}
  </Story>
</Preview>

## 尺寸

可以通过`size`参数来设置输入框的大小, 可选参数为`large`,`default`,`small`, 默认为 `default`

<Preview>
  <Story name="size 尺寸">
    {{
      components: { Input },
      template: `
            <form style="display:flex">
                <Input v-model="value1" size="large" placeholder="请输入内容..." class="mr10"></Input>
                <Input v-model="value2"  placeholder="请输入内容..." class="mr10"></Input>
                <Input v-model="value3" size="small" placeholder="请输入内容..." ></Input>
            </form>
      `,
      data() {
        return {
          value1: "",
          value2: "",
          value3: "",
        };
      },
    }}
  </Story>
</Preview>

## 清除输入内容

可通过设置`clearable`属性来开启清空按钮

<Preview>
  <Story name="clearable 清除输入">
    {{
      components: { Input },
      template: `
            <form style="display:flex">
                <Input v-model="value" placeholder="请输入内容..." clearable></Input>
            </form>
      `,
      data() {
        return {
          value: "",
        };
      },
    }}
  </Story>
</Preview>

## API

<Props of={Input} />
